<template>
  <div class="art-full-height">
    <!-- 搜索栏 -->
    <ArtSearchBar
      v-model="searchForm"
      :items="formItems"
      :show-expand="true"
      @search="handleSearch"
      @reset="resetSearchParams"
    />

    <ElCard class="art-table-card" shadow="never">
      <ArtTableHeader
        v-model:columns="columnChecks"
        v-model:showSearchBar="showSearchBar"
        :loading="loading"
        @refresh="refreshData"
      />

      <!-- 数据表格 -->
      <ArtTable
        :loading="loading"
        :data="data"
        :columns="columns"
        :pagination="pagination"
        @pagination:size-change="handleSizeChange"
        @pagination:current-change="handleCurrentChange"
      >
        <!-- 用户头像 -->
        <template #newHeadPhoto="{ row }">
          <div v-if="row.newHeadPhoto" class="flex items-center gap-2">
            <ElImage
              :src="row.newHeadPhoto"
              :preview-src-list="[row.newHeadPhoto]"
              preview-teleported
              fit="cover"
              class="w-10 h-10"
            />
          </div>
          <span v-else class="no-image">暂无图片</span>
        </template>

        <!-- 用户状态 -->
        <template #newStatus="{ row }">
          <ElTag :type="getStatusTagType(row.newStatus)">
            {{ getStatusText(row.newStatus) }}
          </ElTag>
        </template>

        <!-- 创建时间格式化 -->
        <template #createTime="{ row }">
          {{ formatDateTime(row.createTime) }}
        </template>
      </ArtTable>


    </ElCard>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { dayjs } from 'element-plus'
  import { useTable } from '@/composables/useTable'
  import ArtSearchBar from '@/components/core/forms/art-search-bar/index.vue'
  import ArtTable from '@/components/core/tables/art-table/index.vue'
  import { openApiNewUserPageDataUsingPost } from '@/api/neWxinjiuyerenqun'

  // 类型定义
  interface SearchForm {
    newPhone?: string
    newStatus?: number | null
    newIdentity?: string
  }



  // 响应式数据
  const searchForm = ref<SearchForm>({
    newPhone: '',
    newStatus: null,
    newIdentity: ''
  })



  // 搜索表单配置
  const formItems = computed(() => [
    {
      key: 'newPhone',
      label: '手机号',
      type: 'input',
      props: {
        placeholder: '请输入手机号',
        clearable: true
      }
    },
    {
      key: 'newIdentity',
      label: '身份证号',
      type: 'input',
      props: {
        placeholder: '请输入身份证号',
        clearable: true
      }
    },
    {
      key: 'newStatus',
      label: '用户状态',
      type: 'select',
      props: {
        placeholder: '请选择用户状态',
        clearable: true,
        options: [
          { label: '正常', value: 10100 },
          { label: '待审核', value: 10101 },
          { label: '已禁用', value: 10102 }
        ]
      }
    }
  ])

  // 使用 useTable 管理表格数据
  const {
    columns,
    columnChecks,
    data,
    loading,
    pagination,
    getData,
    searchParams,
    resetSearchParams,
    handleSizeChange,
    handleCurrentChange,
    refreshData
  } = useTable({
    core: {
      apiFn: openApiNewUserPageDataUsingPost,
      apiParams: {
        body: {
          newPhone: searchForm.value.newPhone,
          newStatus: (searchForm.value.newStatus ?? undefined) as number | undefined,
          newIdentity: searchForm.value.newIdentity
        }
      },
      paginationWrapper: 'body', // 将分页参数包装到 body 对象中
      columnsFactory: () => [
        {
          prop: 'id',
          label: 'ID',
          width: 80
        },
        {
          prop: 'newName',
          label: '姓名'
        },
        {
          prop: 'newPhone',
          label: '手机号'
        },
        {
          prop: 'newIdentity',
          label: '身份证号'
        },
        {
          prop: 'newHeadPhoto',
          label: '用户头像',
          align: 'center',
          headerAlign: 'center',
          useSlot: true
        },
        {
          prop: 'newStatus',
          label: '用户状态',
          align: 'center',
          headerAlign: 'center',
          useSlot: true
        },
        {
          prop: 'scoreNum',
          label: '积分数',
          align: 'center',
          headerAlign: 'center'
        },
        {
          prop: 'createTime',
          label: '创建时间',
          align: 'center',
          headerAlign: 'center',
          useSlot: true
        }
      ]
    }
  })

  const showSearchBar = ref(false)

  const handleSearch = () => {
    searchParams.body.newPhone = searchForm.value.newPhone
    searchParams.body.newStatus = searchForm.value.newStatus ?? undefined
    searchParams.body.newIdentity = searchForm.value.newIdentity
    getData()
  }



  // 格式化日期时间
  const formatDateTime = (dateTime?: string) => {
    return dateTime ? dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss') : ''
  }

  // 用户状态文本
  const getStatusText = (status?: number) => {
    const statusMap: Record<number, string> = {
      10100: '正常',
      10101: '待审核',
      10102: '已禁用'
    }
    return statusMap[status || 0] || '未知'
  }

  // 用户状态标签类型
  const getStatusTagType = (status?: number) => {
    const typeMap: Record<number, any> = {
      10100: 'success',
      10101: 'warning',
      10102: 'danger'
    }
    return typeMap[status || 0] || 'info'
  }
</script>

<style lang="scss" scoped>
  .no-image {
    font-size: 12px;
    color: rgb(var(--art-text-gray-500));
  }
</style>
